<template>
    <cell-wrapper
        v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
        :key="wrapperType"
        :wrapper-type="wrapperType"
        :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
        <text-display-cell v-if="!isEdit" :text="showValue" :columnConfig="columnsConfig" v-bind="contentStyle" />
        <a-date-picker
            v-else
            :value="showValue"
            :showTime="getShowTime"
            @change="handleValueChange"
            :picker="getPicker"
            :format="format"
            :valueFormat="format"
        />
    </cell-wrapper>
</template>

<script>
    import { computed, defineComponent } from 'vue'
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue'
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue'
    import dayjs from 'dayjs';
    export default defineComponent({
        components: {
            TextDisplayCell,
            CellWrapper
        },
        props: {
            // 当前单元格的值
            value: {
                type: String,
                default: () => {
                    return null
                }
            },
            // 单元格的默认样式
            defaultStyle: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 单元格的条件样式配置
            conditionStyle: {
                type: Array,
                default: () => {
                    return []
                }
            },
            // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
            conditionValue: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            format: {
                type: String,
                default: () => {
                    return 'YYYY-MM-DD HH:mm'
                }
            },
            // 当前列的配置
            columnsConfig: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            // 当前单元格是否处于编辑状态
            isEdit: {
                type: Boolean,
                default: () => {
                    return false
                }
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const pickerList = {
                'YYYY-MM': 'month',
                YYYY: 'year'
            }
            const getPicker = computed(() => {
                return pickerList[props.format] || 'date'
            })
            // 内容显示的样式
            const contentStyle = computed(() => {
                let { iconType, icon, color, backgroundColor } = props.defaultStyle || {}
                return { iconType, icon, color, backgroundColor }
            })
            const getShowTime = computed(() => {
                return ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm'].includes(props.format)
            })

            function handleValueChange(value) {
                emit('change', value)
            }
            const showValue = computed(() => {
                try {
                    if (props.value === undefined || props.value === null) {
                        return '';
                    } else {
                        // 尝试使用 dayjs 解析数据，并进行格式化
                        return dayjs(props.value).format(props.format);
                    }
                } catch {
                    return props.value;
                }
            });

            return {
                showValue,
                contentStyle,
                getPicker,
                getShowTime,
                handleValueChange
            }
        }
    })
</script>
